
window.onload = function () {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "#f1f1f1", 	//点颜色
        stroke: "#fff", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);
}
let navB = function () {
    // 选项卡
    let navboxLi = document.querySelectorAll('.navbox li')
    console.log(navboxLi);

    let apiwd = document.querySelectorAll('.apiwd')
    console.log(apiwd);
    let num = 0
    // 点击navboxLi
    navboxLi.forEach(function (v, i) {
        v.addEventListener('click', function () {
            navboxLi[num].classList.remove('active')
            v.classList.add('active')
            apiwd[num].classList.remove('apicode')
            apiwd[i].classList.add('apicode')
            num = i;

        })
    })
}
navB()


// 获取元素
let priceUl = document.querySelector('.price-ul')
console.log(priceUl);
let red = document.querySelector('.red')
console.log(red);
let unitPrice = document.querySelector('#unitPrice')
console.log(unitPrice);

// 数据模拟
let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]
let renData = function () {
    // 保存组装数据代码
    let dataHTML = '';

    // 遍历
    data.forEach(function (v, i) {
        // 组装数据
        dataHTML += `
    <li class="class="${i === 0 ? 'active' : ''}" data-price="${v.price}"  data-unit-price="${v.unitPrice}"">${v.count}</li>
    `
        console.log(dataHTML);

    })
    // 渲染
    priceUl.innerHTML += dataHTML

}
renData()

// 需求2 点击priceUl
priceUl.addEventListener('click', function (e) {
    //    筛选出li
   let bool= e.target.nodeName==='LI'&&e.target.className !='prcode'
//    console.log(bool);

// 判断
if(bool){
    // 先清除说有的类名
    for(let i=1;i<priceUl.children.length;i++){
        priceUl.children[i].className=''
    };
    // 给当前添加激活样式(active)
    e.target.className='active'

    // 设置价格
    red.textContent=e.target.dataset.price
    // 设置单价
    unitPrice.textContent=e.target.dataset.unitPrice
}
})